<!-- InputArea.vue -->
<template>
  <t-row class="input-area">
    <div class="input-type">
      <div
        v-for="(item, index) in localInputType"
        :key="index"
        :class="localSelectInputTypeValue === index ? 'type-item input-type-active' : 'type-item'"
        @click="selectInputTypeEvent(index)"
      >
        <img :src="item.img" alt="" />
        {{ item.name }}
      </div>
    </div>
    <!-- 动态输入容器 -->
    <component
      :is="inputComponents[localSelectInputTypeValue]"
      v-model:files="localFiles"
      v-model:message="inputMessage"
      v-model:inputs="localInputs"
      class="input-area-container"
      :is-loading="localLoading"
      @send-message="$emit('send-message', $event)"
      @upload="$emit('upload')"
      @remove-file="$emit('remove-file', $event)"
      @stop-message="stopMessage"
      @recover-event="recoverEvent"
      @handle-upload-confirm="$emit('handle-upload-confirm', $event)"
    />
  </t-row>
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineProps, defineEmits, computed } from 'vue';

import { stopMessageAPI } from '@/api/coze';

// 异步加载不同输入模式的组件
const inputComponents = {
  '-1': defineAsyncComponent(() => import('./Default.vue')),
  0: defineAsyncComponent(() => import('./KnowledgeSearch.vue')),
  1: defineAsyncComponent(() => import('./ScheduleAssistant.vue')),
  2: defineAsyncComponent(() => import('./TrunkFaultStatistics.vue')),
  3: defineAsyncComponent(() => import('./DailyFaultReport.vue')),
  4: defineAsyncComponent(() => import('./PartyMeetingReview.vue')),
  5: defineAsyncComponent(() => import('./TransmissionReport1PlusN.vue')),
};

const props = defineProps({
  message: { type: String, required: true },
  inputType: { type: Array, required: true },
  selectInputTypeValue: { type: Number, required: true },
  files: { type: Array, required: true },
  inputs: { type: Object, required: true },
  isLoading: { type: Boolean, default: false },
  currenTaskId: { type: String, required: true },
  currentUser: { type: String, required: true },
});

const emit = defineEmits([
  'update:message',
  'update:inputType',
  'update:selectInputTypeValue',
  'update:files',
  'update:isLoading',
  'update:inputs',
  'enter',
  'send-message',
  'stop-message',
  'upload',
  'remove-file',
  'handle-upload-confirm',
]);

// 使用计算属性实现双向绑定
const inputMessage = computed({
  get: () => props.message,
  set: (value) => emit('update:message', value),
});

const localInputs = computed({
  get: () => props.inputs,
  set: (value) => emit('update:inputs', { ...value }),
});

const localInputType = computed({
  get: () => props.inputType,
  set: (val) => emit('update:inputType', val),
});

const localFiles = computed({
  get: () => props.files,
  set: (val) => emit('update:files', [...val]), // 数组深拷贝
});

const localSelectInputTypeValue = computed({
  get: () => props.selectInputTypeValue,
  set: (val) => emit('update:selectInputTypeValue', val), // 数组深拷贝
});

const localLoading = computed({
  get: () => props.isLoading,
  set: (value) => emit('update:isLoading', value),
});

const selectInputTypeEvent = (index: number) => {
  localSelectInputTypeValue.value = index;
};

const recoverEvent = () => {
  localSelectInputTypeValue.value = -1;
};

const stopMessage = () => {
  stopMessageAPI(props.currentUser, props.currenTaskId);
  emit('stop-message');
};
</script>

<style lang="less" scoped>
@import url('../index.less');
</style>
